import { View, StyleSheet, Text, Image } from "react-native";
import Swiper from "react-native-swiper";
const SwiperComp = () => {
  const swiperData = [
    {
      id: 1,
      image: require("../../../../assets/home/icon1.png"),
      title: "京东超市",
    },
    {
      id: 2,
      image: require("../../../../assets/home/icon1.png"),
      title: "京东超市",
    },
    {
      id: 3,
      image: require("../../../../assets/home/icon1.png"),
      title: "京东超市",
    },
    {
      id: 4,
      image: require("../../../../assets/home/icon1.png"),
      title: "京东超市",
    },
    {
      id: 5,
      image: require("../../../../assets/home/icon1.png"),
      title: "京东超市",
    },
  ];
  return (
    <View style={styles.container}>
      <Swiper
        style={styles.wrapper}
        paginationStyle={{ bottom: 10 }}
        dotStyle={{
          // 未选中状态的点样式
          width: 20,
          height: 8,
          borderRadius: 4,
          backgroundColor: "#ddd",
        }}
        activeDotStyle={{
          // 选中状态的点样式
          width: 20,
          height: 8,
          borderRadius: 4,
          backgroundColor: "#dc3324",
        }}
      >
        <View
          style={{
            flexDirection: "row",
            justifyContent: "space-around",
            alignItems: "center",
            height: 120,
          }}
        >
          {swiperData.map((item) => (
            <View style={styles.slide1} key={item.id}>
              <Image source={item.image} style={styles.icon} />
              <Text>{item.title}</Text>
            </View>
          ))}
        </View>
        <View
          style={{
            flexDirection: "row",
            justifyContent: "space-around",
            alignItems: "center",
            height: 120,
          }}
        >
          {swiperData.map((item) => (
            <View style={styles.slide1} key={item.id}>
              <Image source={item.image} style={styles.icon} />
              <Text>{item.title}</Text>
            </View>
          ))}
        </View>
      </Swiper>
    </View>
  );
};
export default SwiperComp;
const styles = StyleSheet.create({
  container: {
    height: 120,
  },
  wrapper: {
    // 轮播图容器样式
  },

  slide1: {
    justifyContent: "center",
    alignItems: "center",
  },
  slide2: {
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#97CAE5",
  },
  slide3: {
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#92BBD9",
  },
  icon: {
    width: 50,
    height: 50,
  },
  text: {
    color: "#fff",
    fontSize: 30,
    fontWeight: "bold",
  },
});
